<template>
  <div style="display: flex; flex-wrap: wrap; gap: 100px">
    <div>
      <p>第一题</p>
      <input type="button" value="切换显示/隐藏" @click="oneShow" />
      <p v-if="oneText">这是一段文本</p>
    </div>
    <div>
      <p>第二题</p>
      <input type="button" value="显示" @click="twoShow" />
      <input type="button" value="隐藏" @click="twoHide" />
      <p v-show="twoText">这是一段文本</p>
    </div>
    <div>
      <p>第三题</p>
      <input type="text" placeholder="请输入内容" v-model="threeContent" />
      <input type="button" value="添加到列表" @click="threeAdd" />
      <ul v-if="threeShow" v-for="(item, index) in threelb" :key="index">
        <li>{{ item }}</li>
      </ul>
      <p v-else>列表为空</p>
    </div>
    <div>
      <p>第四题</p>
      <input type="button" value="显示组件 A" @click="fA" />
      <input type="button" value="显示组件 B" @click="fB" />
      <br />
      <FA v-if="fif" />
      <FB v-else />
    </div>
    <div>
      <p>第五题</p>
      <input type="button" value="使用v-if隐藏" @click="fiveif" />
      <input type="button" value="使用v-show隐藏" @click="fiveshow" />
      <ul v-if="fiif" v-show="fishow" v-for="item in 30000">
        <li>项 {{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import FA from '@/views/v-ifORshowOrfor/FA.vue'
import FB from '@/views/v-ifORshowOrfor/FB.vue'

//第一题
let oneText = ref(false)
function oneShow() {
  oneText.value = !oneText.value
}
//第二题
let twoText = ref(true)
function twoShow() {
  twoText.value = true
}
function twoHide() {
  twoText.value = false
}
//第三题
let threeContent = ref('')
let threelb = reactive([])
let threeShow = ref(false)
function threeAdd() {
  threeShow.value = true
  threelb.push(threeContent.value)
  console.log(threeContent.value)

  threeContent.value = ''
}
//第四题
let fif = ref(true)
function fA() {
  fif.value = true
}
function fB() {
  fif.value = false
}
//第五题
let fiif = ref(true)
let fishow = ref(true)
function fiveif() {
  fiif.value = false
}
function fiveshow() {
  fishow.value = false
}
</script>
